<template>
  <div class="details-page">
    <view class="header">
      <table class="details-page-table">
        <tr>
          <td class="label-td">类型</td>
          <td>{{ INBOUND_TYPE[inventoryData.inboundType] }}</td>
          <td class="label-td">状态</td>
          <td>{{ ORDER_TEXT[inventoryData.status] }}</td>
          <td class="label-td">入库仓库</td>
          <td>
            {{ inventoryData.warehouseCode }}-{{ inventoryData.warehouseName }}
          </td>
        </tr>
        <tr>
          <td class="label-td">申请人</td>
          <td>{{ inventoryData.creatorName }}</td>
          <td class="label-td">申请时间</td>
          <td>{{ timestampToDate(inventoryData.createTime) }}</td>
          <td class="label-td">计划日期</td>
          <td>{{ timestampToDate(inventoryData.scheduledFinishTime) }}</td>
        </tr>
        <tr>
          <td class="label-td">经手人</td>
          <td>{{ inventoryData.processorName }}</td>
          <td class="label-td">确认人</td>
          <td>{{ inventoryData.receiverName }}</td>
          <td class="label-td">确认时间</td>
          <td>{{ timestampToDate(inventoryData.receiveTime) }}</td>
        </tr>

        <tr>
          <td class="label-td">备注</td>
          <td colspan="5">
            {{ inventoryData.remark }}
          </td>
        </tr>
      </table>
    </view>

    <view class="content">
      <scroll-view scroll-y="true" class="scroll-view-style">
        <view
          v-for="(item, index) in inventoryListData"
          :key="index"
          class="list-item"
        >
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>序号：</text> <text>{{ index + 1 }}</text></view
            >
            <view class="list-item-line-text">
              <text>数量：</text> <text>{{ item.quantity }}</text></view
            >

            <view class="list-item-line-text">
              <!-- <text>物资类型：</text> -->
              <text class="status" :class="ORDER_STATUS[item.status]">{{
                ORDER_TEXT[item.status]
              }}</text>
              <text class="material">{{
                PRODUCT_TYPE[item.productType]
              }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>编号：</text> <text>{{ item.productCode }}</text></view
            >
            <view class="list-item-line-text">
              <text>容器：</text>
              <text>{{ item.containerCode || "---" }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>名称：</text> <text>{{ item.productName }}</text></view
            >
            <view class="list-item-line-text">
              <text>有效期：</text>
              <text>{{ timestampToDate(item.expireTime) || "---" }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>批次号：</text>
              <text>{{ item.batch || "---" }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>备注：</text> <text>{{ item.remark || "---" }}</text></view
            >
          </view>
          <view class="list-item-line right" v-if="operation">
            <view class="list-item-line-text">
              <text @click="generateContainerFn(item.id)">生成容器</text>
              <text @click="splitFn(item.id)">拆分</text>
            </view>
          </view>

          <view class="confirm-text" v-if="receive && item.status == 100">
            <view>已确认</view>
            <view class="jieshou">接收</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="bottom-btn" v-if="operation">
      <!-- 接收确认 -- 取消和确认按钮 -->

      <view class="back-btn btn" @click="cancelPage">关闭</view>
      <view class="confirm-btn btn" @click="confirmPage">准备完成</view>
    </view>
    <view class="bottom-btn" v-if="receive">
      <!--接受-- 取消和确认按钮 -->
      <view class="back-btn btn" @click="cancelPage">返回</view>
      <view class="confirm-btn btn" @click="QRCodeFn">扫码容器</view>
    </view>
    <!-- 拆分弹窗 -->
    <uni-popup
      ref="popup"
      type="center"
      :is-mask-click="false"
      @maskClick="closeOperation"
      border-radius="10px 10px 0 0"
    >
      <view class="popup-content">
        <text class="popup-title">拆分数量</text>
        <input
          class="uni-input"
          type="number"
          focus
          v-model="splitNumber"
          placeholder="请输入拆分数量"
        />
        <view class="split-btn">
          <!-- 取消和确认按钮 -->

          <view class="cancel-btn btn" @click="closeOperation">取消</view>
          <view class="confirm-btn btn" @click="confirmSplit">确认</view>
        </view>
      </view>
    </uni-popup>

    <!-- 容器确认弹框 -->
    <uni-popup
      ref="popupContainer"
      type="center"
      :is-mask-click="false"
      border-radius="10px 10px 0 0"
    >
      <view class="popup-content">
        <view class="container-code">
          <text>扫码容器：</text>
          <text>{{
            confirmContainerList[0].containerCode || "---"
          }}</text></view
        >
        <!-- 取消和确认按钮 -->

        <scroll-view scroll-y="true" class="scroll-view-style-container">
          <view
            class="container-item"
            v-for="item in confirmContainerList"
            :key="item.id"
          >
            <view class="list-item-line">
              <view class="list-item-line-text">
                <text>序号：</text>
                <text>{{ item.index }}</text></view
              >
              <view class="list-item-line-text">
                <text>数量：</text>
                <text>{{ item.quantity }}</text></view
              >

              <view class="list-item-line-text">
                <!-- <text>物资类型：</text> -->
                <text class="status">{{ ORDER_TEXT[item.status] }}</text>
                <text class="material">{{
                  PRODUCT_TYPE[item.productType]
                }}</text></view
              >
            </view>
            <view class="list-item-line">
              <view class="list-item-line-text">
                <text>编号：</text>
                <text>{{ item.productCode }}</text></view
              >
            </view>
            <view class="list-item-line">
              <view class="list-item-line-text">
                <text>名称：</text>
                <text>{{ item.productName }}</text></view
              >
            </view>
            <view class="list-item-line">
              <view class="list-item-line-text">
                <text>有效期：</text>
                <text>{{
                  timestampToDate(item.expireTime) || "---"
                }}</text></view
              >
            </view>
            <view class="list-item-line">
              <view class="list-item-line-text">
                <text>批次号：</text>
                <text>{{ item.batch || "---" }}</text></view
              >
            </view>
            <view class="list-item-line">
              <view class="list-item-line-text">
                <text>备注：</text>
                <text>{{ item.remark || "---" }}</text></view
              >
            </view>
          </view>
        </scroll-view>

        <view class="container-btn">
          <view class="cancel-btn btn" @click="closeContainer">取消</view>
          <view class="confirm-btn btn" @click="confirmContainerFn">确认</view>
        </view>
      </view>
    </uni-popup>
  </div>
</template>

<script>
import {
  getInventoryData,
  getInventoryListData,
  generateContainer,
  splitBill,
  confirmCheckReady,
  applyReceiveConfirm,
} from "@/service/index";
import { buildGetUrl, timestampToDate } from "@/common/utils";
import {
  STORAGE_KEY,
  ORDER_STATUS,
  RESPONSE_CODE,
  INBOUND_TYPE,
  PRODUCT_TYPE,
  ORDER_TEXT,
} from "@/common/constant";
export default {
  data() {
    return {
      ORDER_STATUS,
      PRODUCT_TYPE,
      ORDER_TEXT,
      INBOUND_TYPE,
      timestampToDate,
      queryId: "",
      inventoryData: {},
      inventoryListData: [],
      operation: false,
      receive: false,
      splitId: "",
      splitNumber: 1,
      confirmContainerList: [],
    };
  },
  onLoad(options) {
    this.queryId = options.id;
    if (options.mark === "operation") {
      this.operation = true;
    }
    if (options.mark === "receive") {
      this.receive = true;
    }
    this.loadData();
  },
  methods: {
    confirmContainerFn() {
      const params = {
        containerIds: [this.confirmContainerList[0].containerId],
        id: this.queryId,
      };
      applyReceiveConfirm(params).then((res) => {
        if (res.code === RESPONSE_CODE.SUCCESS) {
          // 提示
          uni.showToast({
            title: "接收成功",
            icon: "success",
          });
          this.$refs.popupContainer.close();
          this.getInventoryList(true);
        }
      });
    },
    // 扫码
    QRCodeFn() {
      this.confirmContainerList = [];
      let same = false;
      uni.scanCode({
        // 扫码成功的回调函数
        success: (res) => {
          // console.log("扫描结果：", res.result);
          // WQ|86按|拆分
          if (!res.result.includes("|")) {
            uni.showToast({
              title: "请扫描正确容器",
              icon: "error",
            });
            return;
          }
          const arr = res.result.split("|");
          if (arr[0] !== "WQ") {
            uni.showToast({
              title: "请扫描正确容器",
              icon: "error",
            });
            return;
          }

          this.inventoryListData.forEach((item, index) => {
            if (item.containerId == arr[1]) {
              if (item.status === 100) {
                uni.showToast({
                  title: "该容器已确认",
                  icon: "seccess",
                });
                same = true;
              } else {
                item.index = index + 1;
                this.confirmContainerList.push(item);
              }
            }
          });
          if (this.confirmContainerList.length == 0) {
            if (same) return;
            uni.showToast({
              title: "请扫描正确容器",
              icon: "error",
            });
          } else {
            this.$refs.popupContainer.open();
          }
        },
        // 扫码失败的回调函数
        fail: (err) => {
          console.log("扫描失败：", err);
        },
      });
    },
    closeContainer() {
      this.$refs.popupContainer.close();
    },
    // 确认接受
    confirmPage() {
      // 二次确认
      uni.showModal({
        title: "提示",
        content: "是否确认准备完成?",
        success: (res) => {
          if (res.confirm) {
            const params = {
              id: this.queryId,
            };
            const query = buildGetUrl(params);
            confirmCheckReady(query).then((res) => {
              if (res.code === RESPONSE_CODE.SUCCESS) {
                uni.showToast({
                  title: "确认成功",
                  icon: "success",
                });
                // 返回上一页并刷新
                uni.navigateBack({
                  delta: 1,
                });
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: "error",
                });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    cancelPage() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 确认拆分
    confirmSplit() {
      const params = {
        id: this.splitId,
        quantity: this.splitNumber,
      };
      const query = buildGetUrl(params);
      splitBill(query).then((res) => {
        if (res.code === RESPONSE_CODE.SUCCESS) {
          uni.showToast({
            title: "拆分成功",
            icon: "success",
          });
          this.closeOperation();
          this.getInventoryList();
        } else {
          uni.showToast({
            title: res.msg,
            icon: "error",
          });
        }
      });
    },
    // 点击拆分
    splitFn(id) {
      this.splitId = id;
      this.$refs.popup.open();
    },
    closeOperation() {
      this.$refs.popup.close();
      this.splitNumber = 1;
    },
    // 生成容器
    async generateContainerFn(id) {
      // 二次确认框
      uni.showModal({
        title: "提示",
        content: "是否确认生成容器?",
        success: async (res) => {
          if (res.confirm) {
            const params = {
              id,
            };
            const query = buildGetUrl(params);
            const res = await generateContainer(query);
            if (res.code === RESPONSE_CODE.SUCCESS) {
              uni.showToast({
                title: "生成成功",
                icon: "success",
              });
              this.getInventoryList();
            } else {
              uni.showToast({
                title: res.msg,
                icon: "error",
              });
            }
          }
        },
      });
    },
    // 加载基础信息
    async loadData() {
      const params = {
        id: this.queryId,
      };
      const query = buildGetUrl(params);
      const res = await getInventoryData(query);
      if (res.code === RESPONSE_CODE.SUCCESS) {
        uni.setNavigationBarTitle({
          title: `入库详情-${res.data.orderNumber}`,
        });
        this.inventoryData = res.data;
      }
      this.getInventoryList();
    },
    // 加载列表信息
    async getInventoryList(bool) {
      const params = {
        id: this.queryId,
      };
      const query = buildGetUrl(params);
      const listRes = await getInventoryListData(query);
      if (listRes.code === RESPONSE_CODE.SUCCESS) {
        this.inventoryListData = listRes.data;

        if (!bool) return;
        // 判断this.inventoryListData中每一项的status是不是都等于100
        if (this.inventoryListData.every((item) => item.status === 100)) {
          // 容器都接收后跳转回列表

          uni.navigateBack({
            delta: 1,
          });
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.details-page {
  .header {
    background: #ecf5ff;
    padding: 10rpx;
    padding-bottom: 0rpx;
  }
  .details-page-table {
    width: 100%;
    // 边框合并
    border-collapse: collapse;
    font-size: 20rpx;
    color: #777;
    background: #fff;
    border-radius: 14rpx;
    tr,
    td {
      line-height: 40rpx;
      border: 1rpx solid #eee;
    }
    td:nth-child(odd) {
      text-align: center;
      background-color: #ebeef5;
    }
    td:nth-child(even) {
      padding-left: 10rpx;
    }
    .label-td {
      width: 100rpx;
    }
  }
  .scroll-view-style {
    height: 100%;
    padding: 10rpx;
    box-sizing: border-box;
  }
  .content {
    height: calc(100vh - 270rpx);
    background: #ecf5ff;

    .list-item {
      font-size: 12px;
      margin-bottom: 10rpx;
      background: #fff;
      border-radius: 14rpx;
      padding: 10rpx 20rpx;
      box-sizing: border-box;
      position: relative;
      .confirm-text {
        position: absolute;
        right: 20rpx;
        bottom: 10rpx;
        color: red;
        padding: 4rpx;
        font-size: 30rpx;
        text-align: center;
        border: 4rpx solid red;
        // 旋转
        transform: rotate(-30deg);
        .jieshou {
          font-size: 40rpx;
        }
      }
      .list-item-line {
        display: flex;
        justify-content: space-between;
        line-height: 50rpx;
        color: #777;
      }
      .right {
        justify-content: flex-end;
        text {
          margin-left: 40rpx;
          color: #409eff;
        }
      }
      .material {
        border: 1rpx solid #d9ecff;
        color: #409eff;
        background: #ecf5ff;
        padding: 0 10rpx;
        box-sizing: border-box;
        border-radius: 5rpx;
        font-size: 20rpx;
      }
    }
  }
  .bottom-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80rpx;
    overflow: hidden;
    display: flex;
    .btn {
      flex: 1;
      text-align: center;
      line-height: 80rpx;
      background: #f0f0f0;
    }
    .confirm-btn {
      color: #fff;
      background: #409eff;
    }
  }

  .popup-content {
    background: #fff;
    width: 500rpx;
    border-radius: 10rpx;
    padding: 10rpx 20rpx;
    .popup-title {
      font-size: 24rpx;
      line-height: 60rpx;
    }
    .uni-input {
      height: 60rpx;
      padding-left: 20rpx;
      font-size: 24rpx;
      border: 1rpx solid #eee;
    }
    .split-btn {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      line-height: 80rpx;
      text-align: center;
      .btn {
        flex: 1;
        background: #f0f0f0;
        font-size: 24rpx;
      }
      .confirm-btn {
        color: #fff;
        background: #409eff;
      }
    }
  }
  .container-code {
    text-align: center;
    line-height: 70rpx;
  }

  .scroll-view-style-container {
    max-height: 600rpx;
  }

  .container-item {
    font-size: 12px;
    margin-bottom: 10rpx;
    background: #fff;
    border-radius: 14rpx;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    position: relative;

    .list-item-line {
      display: flex;
      justify-content: space-between;
      line-height: 50rpx;
      color: #777;
    }

    .material {
      border: 1rpx solid #d9ecff;
      color: #409eff;
      background: #ecf5ff;
      padding: 0 10rpx;
      box-sizing: border-box;
      border-radius: 5rpx;
      font-size: 20rpx;
    }
  }
  .container-btn {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    line-height: 80rpx;
    text-align: center;
    .btn {
      flex: 1;
      background: #f0f0f0;
      font-size: 24rpx;
    }
    .confirm-btn {
      color: #fff;
      background: #409eff;
    }
  }
}
</style>
